/**
 * 元件SVG模板配置 - 用户可自定义元件外观
 */

export interface SVGTemplate {
    /** 模板名称，对应元件类型 */
    name: string;
    /** SVG模板字符串，支持变量替换 */
    template: string;
    /** 默认样式配置 */
    defaultStyle: {
        strokeColor: string;
        strokeWidth: number;
        fillColor: string;
        opacity: number;
        dashArray?: string;
    };
}

export const svgTemplates: Record<string, SVGTemplate> = {
    resistor: {
        name: 'resistor',
        defaultStyle: {
            strokeColor: '#8B4513',
            strokeWidth: 3,
            fillColor: 'transparent',
            opacity: 1
        },
        template: `<g class="{{cssClass}}" transform="translate({{x}},{{y}}) rotate({{rotation}})">
            <!-- 扩大的透明点击区域，确保更容易点击 -->
            <rect x="-35" y="-15" width="70" height="30" fill="transparent" pointer-events="visible" stroke="none" style="cursor: pointer"/>
            
            <rect x="-20" y="-8" width="40" height="16" rx="3" 
                  stroke="{{strokeColor}}" 
                  stroke-width="{{strokeWidth}}" 
                  fill="{{fillColor}}" 
                  opacity="{{opacity}}" />
            <line x1="-30" y1="0" x2="-20" y2="0" 
                  stroke="{{strokeColor}}" 
                  stroke-width="{{strokeWidth}}" />
            <line x1="20" y1="0" x2="30" y2="0" 
                  stroke="{{strokeColor}}" 
                  stroke-width="{{strokeWidth}}" />
        </g>`
    },
    capacitor: {
        name: 'capacitor',
        defaultStyle: {
            strokeColor: '#1E90FF',
            strokeWidth: 3,
            fillColor: 'transparent',
            opacity: 1
        },
        template: `<g class="{{cssClass}}" transform="translate({{x}},{{y}}) rotate({{rotation}})" data-element-id="{{id}}">
            <!-- 元件主体点击区域 - 覆盖整个元件包括板间空白 -->
            <rect x="-30" y="-15" width="60" height="30" 
                  fill="transparent" 
                  stroke="none"
                  pointer-events="all"
                  style="cursor: move"/>
            
            <!-- 板间空白区域（视觉指示） -->
            <rect x="-4" y="-12" width="8" height="24" 
                  fill="#E6F3FF" 
                  fill-opacity="0.3" 
                  stroke="none"
                  pointer-events="none"/>
            
            <!-- 左侧电容板 -->
            <line x1="-4" y1="-12" x2="-4" y2="12" 
                  stroke="{{strokeColor}}" 
                  stroke-width="{{strokeWidth}}" 
                  pointer-events="none"/>
            
            <!-- 右侧电容板 -->
            <line x1="4" y1="-12" x2="4" y2="12" 
                  stroke="{{strokeColor}}" 
                  stroke-width="{{strokeWidth}}" 
                  pointer-events="none"/>
            
            <!-- 从左侧电容板中心到左侧Pin的连线 -->
            <line x1="-4" y1="0" x2="-30" y2="0" 
                  stroke="{{strokeColor}}" 
                  stroke-width="{{strokeWidth}}" 
                  pointer-events="none"/>
            
            <!-- 从右侧电容板中心到右侧Pin的连线 -->
            <line x1="4" y1="0" x2="30" y2="0" 
                  stroke="{{strokeColor}}" 
                  stroke-width="{{strokeWidth}}" 
                  pointer-events="none"/>
            
            <!-- 左侧Pin连接点 -->
            <circle cx="-30" cy="0" r="4" 
                    fill="{{strokeColor}}" 
                    stroke="white" 
                    stroke-width="1"
                    data-pin-id="in" 
                    data-component-id="{{id}}" 
                    pointer-events="all"
                    style="cursor: crosshair"/>
            
            <!-- 右侧Pin连接点 -->
            <circle cx="30" cy="0" r="4" 
                    fill="{{strokeColor}}" 
                    stroke="white" 
                    stroke-width="1"
                    data-pin-id="out" 
                    data-component-id="{{id}}" 
                    pointer-events="all"
                    style="cursor: crosshair"/>
        </g>`
    },
    inductor: {
        name: 'inductor',
        defaultStyle: {
            strokeColor: '#9370DB',
            strokeWidth: 2.5,
            fillColor: 'transparent',
            opacity: 1
        },
        template: `<g class="{{cssClass}}" transform="translate({{x}},{{y}}) rotate({{rotation}})">
            <circle cx="0" cy="0" r="15"
                    stroke="{{strokeColor}}"
                    stroke-width="{{strokeWidth}}"
                    fill="{{fillColor}}"
                    opacity="{{opacity}}" />
            <line x1="-25" y1="0" x2="-15" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
            <line x1="15" y1="0" x2="25" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
        </g>`
    },
    voltage_source: {
        name: 'voltage_source',
        defaultStyle: {
            strokeColor: '#FF4500',
            strokeWidth: 2,
            fillColor: '#FFFACD',
            opacity: 1
        },
        template: `<g class="{{cssClass}}" transform="translate({{x}},{{y}}) rotate({{rotation}})">
            <!-- 扩大的透明点击区域，确保更容易点击 -->
            <rect x="-30" y="-25" width="60" height="50" fill="transparent" pointer-events="visible" stroke="none" style="cursor: pointer"/>
            
            <!-- 外圆 -->
            <circle cx="0" cy="0" r="15"
                    stroke="{{strokeColor}}"
                    stroke-width="{{strokeWidth}}"
                    fill="{{fillColor}}"
                    opacity="{{opacity}}" />
            
            <!-- 正负极标识 -->
            <line x1="-7" y1="-7" x2="-7" y2="7"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
            <line x1="-10" y1="-7" x2="-4" y2="-7"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
            <line x1="-10" y1="7" x2="-4" y2="7"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
            
            <line x1="4" y1="-7" x2="10" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
            <line x1="4" y1="7" x2="10" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
            
            <!-- 中心V标识 -->
            <text x="0" y="4" text-anchor="middle" font-size="12" fill="{{strokeColor}}" font-weight="bold">V</text>
            
            <!-- 引线 -->
            <line x1="-25" y1="0" x2="-15" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
            <line x1="15" y1="0" x2="25" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
            <!-- Pin连接点 -->
            <circle cx="-25" cy="0" r="3" fill="{{strokeColor}}" data-pin-id="in" data-component-id="{{id}}"/>
            <circle cx="25" cy="0" r="3" fill="{{strokeColor}}" data-pin-id="out" data-component-id="{{id}}"/>
        </g>`
    },
    current_source: {
        name: 'current_source',
        defaultStyle: {
            strokeColor: '#32CD32',
            strokeWidth: 2,
            fillColor: '#F0FFF0',
            opacity: 1
        },
        template: `<g class="{{cssClass}}" transform="translate({{x}},{{y}}) rotate({{rotation}})">
            <!-- 扩大的透明点击区域，确保更容易点击 -->
            <rect x="-30" y="-25" width="60" height="50" fill="transparent" pointer-events="visible" stroke="none" style="cursor: pointer"/>
            
            <!-- 外圆 -->
            <circle cx="0" cy="0" r="15"
                    stroke="{{strokeColor}}"
                    stroke-width="{{strokeWidth}}"
                    fill="{{fillColor}}"
                    opacity="{{opacity}}" />
            
            <!-- 箭头表示电流方向 -->
            <line x1="-8" y1="0" x2="8" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="2.5" />
            
            <!-- 箭头头部 -->
            <line x1="3" y1="-4" x2="8" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="2" />
            <line x1="3" y1="4" x2="8" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="2" />
            
            <!-- 中心I标识 -->
            <text x="0" y="-8" text-anchor="middle" font-size="12" fill="{{strokeColor}}" font-weight="bold">I</text>
            
            <!-- 引线 -->
            <line x1="-25" y1="0" x2="-15" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
            <line x1="15" y1="0" x2="25" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}" />
            <!-- Pin连接点 -->
            <circle cx="-25" cy="0" r="3" fill="{{strokeColor}}" data-pin-id="in" data-component-id="{{id}}"/>
            <circle cx="25" cy="0" r="3" fill="{{strokeColor}}" data-pin-id="out" data-component-id="{{id}}"/>
        </g>`
    },
    wire: {
        name: 'wire',
        defaultStyle: {
            strokeColor: '#333333',
            strokeWidth: 3,
            fillColor: 'transparent',
            opacity: 1
        },
        template: `<g class="{{cssClass}}" transform="translate({{x}},{{y}}) rotate({{rotation}})">
            <!-- 扩大垂直方向的点击区域 -->
            <rect x="-25" y="-12" width="50" height="24" fill="transparent" pointer-events="visible"/>
            
            <!-- 主导线 -->
            <line x1="-25" y1="0" x2="25" y2="0"
                  stroke="{{strokeColor}}"
                  stroke-width="{{strokeWidth}}"
                  opacity="{{opacity}}"
                  stroke-linecap="round"
                  stroke-linejoin="round" />
            <!-- 端点连接点 -->
            <circle cx="-25" cy="0" r="3" fill="{{strokeColor}}" stroke="none" />
            <circle cx="25" cy="0" r="3" fill="{{strokeColor}}" stroke="none" />
        </g>`
    }
};

/**
 * 简单的模板渲染函数
 */
export function renderTemplate(template: string, data: Record<string, any>): string {
    return template.replace(/\{\{(\w+)(\.[\w\.]+)?\}\}/g, (match, key) => {
        return data[key] !== undefined ? data[key] : match;
    }).replace(/\{\{#if (\w+)\}\}(.*?)\{\{\/if\}\}/g, (match, condition, content) => {
        return data[condition] ? content : '';
    });
}